<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Rotating Rope</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = "italic 24px 'Times New Roman'";

        // --- Helper function to draw a line with an arrowhead ---
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 12; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            
            // Draw the line
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            
            // Draw the arrowhead
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }
        
        // --- Helper function to draw a filled arrowhead for an arc ---
        function drawArcArrowhead(ctx, cx, cy, radius, angle) {
            const headlen = 12;
            const arrowX = cx + radius * Math.cos(angle);
            const arrowY = cy + radius * Math.sin(angle);
            
            // Tangent direction for a counter-clockwise arc
            const tangentAngle = angle + Math.PI / 2;
            
            // Draw a filled triangle
            ctx.beginPath();
            ctx.moveTo(arrowX, arrowY);
            ctx.lineTo(arrowX - headlen * Math.cos(tangentAngle - Math.PI / 6), arrowY - headlen * Math.sin(tangentAngle - Math.PI / 6));
            ctx.lineTo(arrowX - headlen * Math.cos(tangentAngle + Math.PI / 6), arrowY - headlen * Math.sin(tangentAngle + Math.PI / 6));
            ctx.closePath();
            ctx.fill();
        }

        // Define origin point 'O'
        const ox = 120;
        const oy = 250;

        // --- 1. Draw Vertical Axis of Rotation ---
        ctx.beginPath();
        drawArrow(ctx, ox, oy + 200, ox, oy - 220);
        ctx.stroke();

        // --- 2. Draw Horizontal Line representing the rope ---
        ctx.beginPath();
        ctx.moveTo(ox, oy);
        ctx.lineTo(ox + 300, oy);
        ctx.stroke();

        // --- 3. Draw Labels and Symbols ---

        // Label 'O' for the origin/pivot point
        ctx.font = "28px 'Times New Roman'";
        ctx.fillText("O", ox - 35, oy + 10);

        // --- 4. Draw Rotation Indicator (Arc and Arrow) ---
        const arcCenterY = oy - 120;
        const arcRadius = 25;
        const startAngle = Math.PI; // Starts from the left side of the axis
        const endAngle = 1.75 * Math.PI; // Ends in the top-left quadrant

        // Draw the arc
        ctx.beginPath();
        ctx.arc(ox, arcCenterY, arcRadius, startAngle, endAngle);
        ctx.stroke();
        
        // Draw the filled arrowhead on the arc
        drawArcArrowhead(ctx, ox, arcCenterY, arcRadius, endAngle);
        
        // Label 'ω' for angular velocity
        ctx.font = "italic 30px 'Times New Roman'";
        ctx.fillText("ω", ox + arcRadius + 15, arcCenterY + 10);

        // --- 5. Labels for the rope (L₀, M, k) ---
        const labelY = oy - 25;
        const startX = ox + 100;

        // Draw "L"
        ctx.font = "italic 28px 'Times New Roman'";
        ctx.fillText("L", startX, labelY);
        const lWidth = ctx.measureText("L").width;

        // Draw subscript "₀"
        ctx.font = "italic 18px 'Times New Roman'";
        ctx.fillText("0", startX + lWidth - 4, labelY + 6);
        const zeroWidth = ctx.measureText("0").width;

        // Draw ", M, k"
        ctx.font = "italic 28px 'Times New Roman'";
        ctx.fillText(", M, k", startX + lWidth, labelY);

    </script>
</body>
</html>